<template>
  <div class="kaipai">

    <el-card class="box-card">
      <div class="left">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">


          <el-row :gutter="10">
            <el-col :span="9">
              <el-form-item label="手牌" label-width="35%" prop="handBrand" >
                <el-input ref="handInput" v-model="form.handBrand" @keydown.enter.native="getHandBrand"></el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="3" style="margin-left:3% ">
                <el-checkbox label="外卖" name="type" v-model="result" ></el-checkbox>
                <el-checkbox label="儿童"  name="type" v-model="result"></el-checkbox>-->
<!--              <el-checkbox-group v-model="form.handCategory">
              </el-checkbox-group>-->

<!--            </el-col>-->

            <el-col :span="2" style="margin-left:3%">
              <el-button type="primary" @click="dupai" plain>读 牌</el-button>
            </el-col>

<!--            <el-col :span="3" style="margin-left: 20%">
              <el-checkbox-group v-model="form.handCategory">
                <el-checkbox label="无浴资" name="type"></el-checkbox>
                <el-checkbox label="E儿童" name="type"></el-checkbox>
              </el-checkbox-group>

            </el-col>-->
            <el-col :span="12">
              <el-form-item label="主牌" label-width="25.5%" prop="mastercard">
                <el-input v-model="form.mastercard" disabled="disabled" placeholder="" style="width:100%;float:left"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="套餐" label-width="26%" prop="groupId">
                <el-autocomplete
                  style="width: 100%"
                  placeholder="请选择套餐"
                  v-model="taocan"
                  :fetch-suggestions="querySearchAsync"
                  @select="handleSelect"
                >
                </el-autocomplete>
<!--                <el-input v-model="form.note1" placeholder="请选择套餐" ></el-input>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>


          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="团体号" label-width="26%" prop="groupId">
                <el-input v-model="form.groupId" placeholder="请输入团体号" disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="票号" label-width="23%" prop="oddNumbers">
                <el-input v-model="form.oddNumbers" placeholder="请输入票号" style="width:97%;" ></el-input>
              </el-form-item>
            </el-col>


          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="同来" label-width="13%" prop="together">
                <el-input
                  type="textarea"
                  :rows="2"
                  disabled="disabled"
                  placeholder=""
                  resize="none"
                  v-model="form.together"
                  style="width: 99%;resize: none;">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>


          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="备注" label-width="13%" prop="note">
                <el-input type="textarea" :rows="2" v-model="form.note" resize="none" placeholder="请输入备注" style="width: 99%;" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="团体备注" label-width="13%" prop="groupNotes">
                <el-input type="textarea" :rows="2" v-model="form.groupNotes" resize="none" placeholder="请输入团体备注" style="width: 99%;" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
<!--          <el-row :gutter="10">

          </el-row>-->

<!--          <el-row :gutter="10">
            <el-col :span="15">
              <el-form-item  prop="name" >
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" style="width:190px">

                </el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox v-model="checked">最低消费</el-checkbox>
              </el-checkbox-group>

            </el-col>

          </el-row>-->



<!--          <el-form-item label="" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="o备品2" name="type"></el-checkbox>
              <el-checkbox label="z备品" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>-->
<!--          <el-divider direction="vertical"></el-divider>-->

        </el-form>
        <el-button type="primary" @click.native.stop.prevent="submitForm" style="margin-left: 71.5%">确 定</el-button>
        <el-button type="primary" plain  @click="reset" >重 录</el-button>
        <el-button class="dupn" @click.native.stop.prevent="close">返 回 </el-button>
      </div>

      <div class="middle">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">


<!--          <el-row>

            <el-col :span="20">
              <el-form-item label="主牌" label-width="25%" prop="mastercard">
                <el-input v-model="form.mastercard" placeholder="请输入主牌" style="width:100%;float:left"/>
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-row>
<!--            <el-col :span="20">
              <el-form-item label="班次" label-width="25%" prop="sailings">
                <el-input v-model="form.sailings" placeholder="请输入班次" style="width:100%;float:left"/>
              </el-form-item>
            </el-col>-->
          </el-row>
<!--          <el-row>
            <el-col :span="20">
              <el-form-item label="吧台" label-width="20%" prop="userName">
                <el-input v-model="form.barNumber" placeholder="请输入班次" style="width:100%;float:left"/>
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-row :gutter="10">


          </el-row>
<!--          <el-row>
            <el-col :span="20">
              <el-form-item label="团体备注" label-width="25%" prop="groupNotes">
                <el-input type="textarea" :rows="4" v-model="form.groupNotes" placeholder="请输入团体备注" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>-->


<!--          <el-row :gutter="10">

            <el-button plain>T团体牌</el-button>

            <el-col :span="15">
              <el-form-item  prop="name" label-width="12%">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="10">

            <el-button plain>T团体牌</el-button>

            <el-col :span="15">
              <el-form-item  prop="name" label-width="12%">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">

            <el-button plain>T团体牌</el-button>

            <el-col :span="15">
              <el-form-item  prop="name" label-width="12%">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">

            <el-button plain>T团体牌</el-button>

            <el-col :span="15">
              <el-form-item  prop="name" label-width="12%">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-form-item >


          </el-form-item>

        </el-form>


      </div>
<!--      <div class="right">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


          <div class="right-title">
            <p>最后一次交易时间:</p>
          </div>
          <p>会员信息</p>
          <p>会员姓名</p>
          <p>会员级别</p>
          <p>会籍顾问</p>
          <p>会员生日</p>
          <p>使用日期</p>
          <p>电话号码</p>
          <p>验证码</p>


          <el-form-item>
            <el-button type="primary" @click="submitForm('')">验证会员</el-button>
            <el-button @click="resetForm('')">登记指纹</el-button>

          </el-form-item>
        </el-form>
      </div>-->
    </el-card>
    <div id="footer" style="color: red;margin-left: 13%"></div>
  </div>
</template>

<script>
import { listBills, getHands, delBills, addBills, updateBills,getHandBrands,getMastercard } from "@/api/module/whd/kaipai";
import { listMeal, getMeal, delMeal, addMeal, updateMeal } from "@/api/module/whd/meal";
import axios from 'axios';
import {check, bingpai} from "@/api/module/ljw/bingpai"
import {addProject} from "@/api/module/whd/diandan";


export default {
  name: "Bills",
  props: ['mastercard'],
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_retention_status', 'yqg_post', 'yqg_department', 'yqg_merge_status'],
  data() {
    return {
      result:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 吧台账单表格数据
      billsList: [],
      // 套餐信息表格数据
      mealList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      bingform: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: "",
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: null,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      taocan:"",
      taocancode:"0",
      childs:[],
      hands:[],
      HandBrand:{
        handBrand: "",
      },
      barmastercard:"",
      barbill:{
        mastercard:"",
      },
      handbrand:null,
      // 表单参数
      form: {handBrand: "",
        handCategory:null,
        together:"",
        note1:"",},
      // 表单校验
      rules: {
        oddNumbers:[{
        max:8,message:"票号长度不能超过8位",trigger:"change",
        }],
        note:[{
          max:50,message:"备注长度不能超过50汉字",trigger:"change",
        }],
        groupNotes:[{
          max:50,message:"团体备注长度不能超过50个汉字",trigger:"change",
        }]
      }
    };
  },
  watch: {
    mastercard(){
      this.barmastercard=this.mastercard[0];

      this.getMastercards()
    },

  },
  created() {
    if(this.mastercard==null||this.mastercard==''){

    }else{

      this.barmastercard=this.mastercard[0];

      this.getMastercards()
    }

    this.form.groupId=new Date().getTime();
    this.getMealList();
   /* this.form.oddNumbers=new Date().getTime()%10000000000;*/
  },

  mounted() {
    this.form.groupId=new Date().getTime();
   /* window.addEventListener('keydown', this.handleKeydown)*/
    /*this.form.oddNumbers=new Date().getTime()%10000000000;*/
  },
  methods: {
   /* handInputFocus(){
      this.$nextTick(()=>{
        this.$refs.handInput.focus();
      })
    },*/
    getMastercards(){
      getMastercard(this.barmastercard).then(response=>{
        this.barbill=response
        console.log(this.barbill)
        if(this.barbill.mastercard==""){

        }
        else{
          this.form.mastercard=this.barbill.mastercard;
          this.form.groupId=this.barbill.groupId;
          this.form.together=this.barbill.together;
          this.form.oddNumbers=this.barbill.oddNumbers;
          this.form.note=this.barbill.note;
          this.form.groupNotes=this.barbill.groupNotes;

        }
      });
    },
    close(){
    this.$emit("closeDialog");
    this.reset();
   },
    /** 查询套餐信息列表 */
    getMealList() {
      this.loading = true;
      listMeal(this.queryParams).then(response => {
        this.mealList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    addPara(handbrand){
      //创建p标签
      var p=document.createElement("p");
      p.setAttribute("name","p1")
      var text=document.createTextNode(handbrand+" 手牌读牌成功");
      p.appendChild(text);
      var div=document.getElementById("footer");
      div.appendChild(p);
    },
    delPara(){
      var ps=document.getElementsByName("p1");
      console.log(ps.length);
      var size=ps.length;
      for(let i=0;i<size;i++){
        console.log(i);
        var p=ps.item(0);
        console.log(p);
        p.remove();
      }

      /*var div=document.getElementById("footer");
      /!*p.remove();*!/*/
    },
    /** 查询吧台账单列表 */
    getList() {
      this.loading = true;
      listBills(this.queryParams).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelect(item){
      this.taocancode = item.packageProjectcode;
    },
    //cb 回调函数，将处理好的数据推回
    querySearchAsync(queryString, cb) {
      let projectJson= JSON.parse(JSON.stringify(this.mealList).replace(/packageName/g,"value"));
      let results = queryString ? projectJson.filter(this.createStateFilter(queryString)) : projectJson;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
    //根据输入的字段进行筛选
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: "",
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: null,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: "",
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: "",
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.delPara();
      this.resetForm("form");
      this.taocancode="0";
      this.taocan="";
      this.form.groupId=new Date().getTime();
      /*this.form.oddNumbers=new Date().getTime()%10000000000;*/

    },
    getHandBrand(){
      getHandBrands(this.form.handBrand).then(response=>{
        console.log(this.HandBrand);
        console.log(this.form.handBrand);
        this.HandBrand.handBrand=response.handBrand;
        console.log(this.HandBrand.handBrand)
        if(this.HandBrand.handBrand===""){
          this.$modal.msgError("请使用读牌器读取手牌,不要反复读取！");
          this.form.handBrand="";
        }
        else{
          this.form.handBrand=this.HandBrand.handBrand;
        }

      });
    },
    /** 读牌 */
    dupai(){
      console.log(this.result);
      console.log(this.taocancode);
      console.log(this.form.handBrand);
      console.log(this.form.handBrand===null&&this.form.handBrand==="");
      if(!this.form.handBrand.includes(" ")){
        if(this.form.handBrand!==null&&this.form.handBrand!==""){
          if(!this.form.together.includes(this.form.handBrand)||this.form.together===""){
            console.log(this.form.handBrand)
            getHands(this.form.handBrand).then(response => {
              this.$modal.msgSuccess(this.form.handBrand+" 手牌读牌成功");

              this.addPara(this.form.handBrand);
              this.handbrand=this.form.handBrand;
              if(this.form.together===""){
                this.form.together=this.form.handBrand
                this.form.mastercard=this.form.handBrand;
                this.form.handBrand="";

              }else{
                this.form.together=this.form.together+","+this.form.handBrand;
                this.form.handBrand="";
              }
              if(this.form.note1===""){
                this.form.note1=this.taocancode;
                console.log(this.form.note1)
                this.taocan="";
                this.taocancode="0";
              }else{
                this.form.note1=this.form.note1+","+this.taocancode;
                console.log(this.form.note1)
                this.taocan="";
                this.taocancode="0";
              }
            });
            /*this.form.handBrand="";*/

          }
          else{
            this.$modal.msgError(this.form.handBrand+"手牌已读牌");

            this.form.handBrand="";
          }

        }else{

          this.$modal.msgError("手牌号不能为空,请使用读牌器读取手牌！")

        }

      }else{
        this.$modal.msgError("手牌号中包含空格，请重新读牌")

        this.form.handBrand="";
      }
      console.log(this.handbrand);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加吧台账单";
    },
    /** 修改按钮操作 */
    /*handleUpdate(row) {
      this.reset();
      const ID = row.ID || this.ids
      getBills(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改吧台账单";
      });
    },*/
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ID != null) {
            updateBills(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            if(this.form.together===""){
              this.$modal.msgError("手牌号不能为空,请读牌后使用！")
            }
            else{
              addBills(this.form).then(response => {
                this.$modal.msgSuccess("开牌成功");
                /* this.childs=this.form.note2.split(",");
                 this.hands=this.form.together.split(",");
                 for(var i=0;i<this.childs.length;i++){
                   console.log(this.childs[i]);
                   if(this.childs[i]==="1"){
                   this.bingform.mergeHands=this.form.mastercard;
                   this.bingform.handBrand=this.hands[i];
                   bingpai(this.bingform);
                   }
                 }*/
                this.reset();
                this.open = false;
                this.getList();
              });
            }

          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      ppp(this.form).then(response => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('project/bills/export', {
        ...this.queryParams
      }, `bills_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.left{
  width: 100%;
  //margin-top:20px;
  display:inline-block;
  float: left;
  position: relative;

}

.middle {
  width: 50%;
  //margin-top:20px;
  display:inline-block;


}

/*大框*/
.btbox {
  width: 700px;
  height: 240px;
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  .el-row{
    .el-button{
      margin-left:570px;
    }

  }
}


/*标题框*/
.bptitle {
  width: 695.2px;
  height: 30px;
  background-color: #5676e9;
  font-size: 18px;
}

/*主体框*/
.firframe {
  //margin-top: 40px;
  margin-left: 0;

  .el-form-item {
    margin-bottom: 10px;

    .el-input {
      width: 180px;
      margin-bottom: 8px;
    }
  }
}

.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
  box-shadow: none;
  border: 0;
}
.dupn {
  position: relative;
}


</style>
